<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/index.css">
    <title>美团 page1 index</title>
</head>
<body>
    <!-- 头部搜索框 -->
    <div class="tel-top"></div>
    <div class="top">
        
        <div class="Top-left">
            <div class="Top-left-Top">昆明
                <i class="fa fa-chevron-down" ></i>
            </div>
            <div class="Top-left-bottom">阴 25℃</div>
        </div>

        <div class="Top-mid">
            <div class="tm-f">炸鸡</div>
            <div class="line"></div>
            <label class="T-mid-right">搜索</button>
        </div>

        <div class="Top-right">
            <img src="/icon/index/icon_添加.png" alt="添加" class="tr-img">
        </div>

    </div>
    
    <!-- 头部小标签 -->
    <ul class="top-click-func">
        <li class="click-func-item">
            <div class="img-wid"><img src="/icon/head//扫码.png" alt="扫一扫" class="click-item-img"></div>
            <p class="click-item-p">扫一扫</p>
        </li>
        <li class="click-func-item">
            <div class="img-wid"><img src="/icon/head/骑车.png" alt="骑车" class="click-item-img"></div>
            <p class="click-item-p">骑车</p>
        </li>
        <li class="click-func-item">
            <div class="img-wid"><img src="/icon/head/打车.png" alt="打车" class="click-item-img"></div>
            <p class="click-item-p">打车</p>
        </li>
        <li class="click-func-item">
            <div class="img-wid"><img src="/icon/head/火车票.png" alt="火车票机票" class="click-item-img"></div>
            <p class="click-item-p">火车票机票</p>
        </li>
        <li class="click-func-item">
            <div class="img-wid"><img src="/icon/head/跑腿APP.png" alt="跑腿" class="click-item-img"></div>
            <p class="click-item-p">跑腿</p>
        </li>
    </ul>
    <!-- 中间小标签 -->
    <div class="mid-func-label">
        <ul class="mid-func-line">
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/外卖.png" alt="外卖" class="img-midC"></div>
                <p class="p-midC">外卖</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/美食.png" alt="美食" class="img-midC"></div>
                <p class="p-midC">美食</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/酒店.png" alt="酒店/民宿" class="img-midC"></div>
                <p class="p-midC">酒店/民宿</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/面性岛屿休闲度假.png" alt="休闲/玩乐" class="img-midC"></div>
                <p class="p-midC">休闲/玩乐</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/2-电影院.png" alt="电影/演出" class="img-midC"></div>
                <p class="p-midC">电影/演出</p>
            </li>
        </ul> 
        <ul class="mid-func-line"> 
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/手提袋.png" alt="美团优选" class="img-midC"></div>
                <p class="p-midC">美团优选</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/奶茶小吃.png" alt="饮品/小吃" class="img-midC"></div>
                <p class="p-midC">饮品/小吃</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/超市.png" alt="超市/便利店" class="img-midC"></div>
                <p class="p-midC">超市/便利店</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/药店.png" alt="买药" class="img-midC"></div>
                <p class="p-midC">买药</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/书.png" alt="学习培训" class="img-midC"></div>
                <p class="p-midC">学习培训</p>
            </li>
        </ul> 
        <ul class="mid-func-line">
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/生活服务.png" alt="生活服务" class="img-midC"></div>
                <p class="p-midC">生活服务</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/生鲜-水果1.png" alt="免费领水果" class="img-midC"></div>
                <p class="p-midC">免费领水果</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/付钱.png" alt="天天领现金" class="img-midC"></div>
                <p class="p-midC">天天领现金</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/菜菜.png" alt="送菜上门" class="img-midC"></div>
                <p class="p-midC">送菜上门</p>
            </li>
            <li class="mid-func-item">
                <div class="mfi-div-width"><img src="/icon/mid/女人.png" alt="丽人/美发" class="img-midC"></div>
                <p class="p-midC">丽人/美发</p>
            </li>
        </ul>
        <div class="mid-bottom-p">
            <ul class="mid-point">
                <li class="mp-item selected"></li>
                <li class="mp-item"></li>
                <li class="mp-item"></li>
            </ul>
        </div>
        
    </div>
    <!-- 中间红包 -->
    <div class="hb-mid">
        <img src="/icon/index/hb.png" alt="">
        <!-- <div class="hb-border-side">
            <div class="hb-border-inner">
                <div class="inner-left-hb"> 
                    <div class="left-left"></div>
                    <div class="left-right"></div>
                </div>
                <div class="inner-right-hb">
                    <p class="p-text">领</p>
                    <i></i>
                </div>
            </div>
        </div> -->
    </div>
    <!-- 中间购买框 -->
    <div class="buy-bottom">
        <div class="left-bottom">
            <div class="header-buy">
                <p class="top-1">美团优选</p>
                <div class="top-2">
                    <p class="top-2-text">次日达</p>
                    <div class="line"></div>
                    <p class="top-2-text">自提</p>
                </div>
                <div class="top-3-div">
                    <div class="top-3-icon">
                    <p class="top-3-p">x</p>
                    </div>
                </div>
                
            </div>
            <ul class="buy-img">
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/荔枝.png" alt="荔枝" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/西瓜.png" alt="西瓜" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/葡萄.png" alt="葡萄" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/山竹.png" alt="山竹" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right-bottom">
            <div class="top-img-buy">
                <img src="/icon/index/线性商店店铺.png" alt="店铺" class="dp-rb">
            </div>
            <div class="text-1">风情 傣味手抓饭</div>
            <div class="text-2">4.7分 | 月售3419</div>
            <div class="text-3">
                <p class="bottom-text-buy-zk">
                    100减5
                </p>
                <p class="bottom-text-buy-zk">
                    三折起
                </p>
            </div>
        </div>
        <div class="right-bottom">
            <div class="top-img-buy">
                <img src="/icon/index/鱼.png" alt="店铺" class="dp-rb" style="width: 80%;">
            </div>
            <div class="text-1">实惠 鲜香烤鱼</div>
            <div class="text-2">4.9分 | 月售3419</div>
            <div class="text-3">
                <p class="bottom-text-buy-zk">
                    20减4
                </p>
                <p class="bottom-text-buy-zk">
                    新客减3
                </p>
                <p class="bottom-text-buy-zk">
                    0.02折起
                </p>
            </div>
        </div>
        <div class="left-bottom">
            <div class="header-buy">
                <p class="top-1">美团优选</p>
                <div class="top-2">
                    <p class="top-2-text">次日达</p>
                    <div class="line"></div>
                    <p class="top-2-text">自提</p>
                </div>
                <div class="top-3-div">
                    <div class="top-3-icon">
                    <p class="top-3-p">x</p>
                    </div>
                </div>
                
            </div>
            <ul class="buy-img">
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/荔枝.png" alt="荔枝" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/西瓜.png" alt="西瓜" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/葡萄.png" alt="葡萄" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
                <li class="buy-item">
                    <div class="img-width-buy">
                        <img src="/icon/buy-img/山竹.png" alt="山竹" class="mid-click-img">
                    </div>
                    <div class="img-text-buy">
                        <p class="money-label">￥</p>
                        <p class="money">9.67</p>
                    </div>
                </li>
            </ul>
        </div>
        
    </div>
    <!-- 底部导航栏 -->
    <div class="bottom">
        <ul class="fixed">
            <li class="bottom-index">
                        <div class="index-1-bg">
                            <p class="index-1-text">美团</p>
                        </div>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/电商.png" alt="电商" class="index-img">
                        <p class="index-text">电商</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/文本.png" alt="消息" class="index-img">
                        <p class="index-text">消息</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/购物车.png" alt="购物车" class="index-img">
                        <p class="index-text">购物车</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/我的.png" alt="我的" class="index-img">
                        <p class="index-text">我的</p>
                    </li>
                </ul>
        </ul>
    </div>
</body>
</html>